import React, {useEffect, useMemo, useState} from 'react';
// import PropTypes from 'prop-types';
import axios from "axios";
/*
useCallback 的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以 的。
useCallback (fn, inputs) is equivalent to useMemo(() => fn, inputs).
唯一的区别是： useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo  会执行第一个函数并且 将函数执行结果返回给你。 handleClick  所以在前面的例子中，可以返回 来达到存储函数的目的。
所以 useCallback常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而useMemo 更适合经过函数 计算得到一个确定的值，比如记忆组件
* */
const Index = () => {
    const [mytext, setmytext] = useState("")
    const [cinemaList, setcinemaList] = useState([])
    useEffect(() => {
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method: "get",
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',

                'X-Host': 'mall.film-ticket.cinema.list'

            }
        }).then(res => {
            setcinemaList(res.data.data.cinemas)
        })
    }, [])
    const getCinemaList = useMemo(() =>cinemaList.filter(item => item.name.toUpperCase().includes(mytext.toUpperCase()) || item.address.toUpperCase().includes(mytext.toUpperCase())
        )
    , [cinemaList, mytext])
    return (
        <div>

                <input value={mytext} onChange={(evt) => {
                    setmytext(evt.target.value)
                }}/>
                {
                    getCinemaList.map(item =>
                        <dl key={item.cinemaId}>
                            <dt>{item.name}</dt>
                            <dd>{item.address}</dd>
                        </dl>
                    )
                }

        </div>
    );
};

Index.propTypes = {};

export default Index;
